﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" AutoEventWireup="true" CodeBehind="EditInPlace.aspx.cs" Inherits="APMS.WebSite.Views.Test.EditInPlace" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css" media="screen">
        .editable, textarea {
            background-color:#FFFFD3;
        }
    </style>

    <%-- Main Script for this View--%>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            setClickable();
        });

        function setClickable() {
            $('#editInPlace').click(function() {
                var textarea = '<div><textarea rows="10" cols="60">'+$(this).html()+'</textarea>';
                var button	 = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
                var revert = $(this).html();
                $(this).after(textarea+button).remove();
                $('.saveButton').click(function(){saveChanges(this, false);});
                $('.cancelButton').click(function(){saveChanges(this, revert);});
            })
            .mouseover(function() {
                $(this).addClass("editable");
            })
            .mouseout(function() {
                $(this).removeClass("editable");
            });
        };

        function saveChanges(obj, cancel) {
            if(!cancel) {
                var t = $(obj).parent().siblings(0).val();
                $.post("/Test/EditInPlace",{
                    content: t
                },function(txt){
                    alert( txt);
                });
            }
            else {
                var t = cancel;
            }
            if(t=='') t='(click to add text)';
            $(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove();
            setClickable();
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationMenuHolder" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageTitleHolder" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CommandLinkHolder" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="SidebarHolder" runat="server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="ContentHolder" runat="server">
    <div id="editInPlace">	
        <p>Dashing <strong>through</strong> the snow on a 
          one-horse open sleigh, over the fields we go, laughing all the way; bells on 
          bob-tail ring, making spirits bright, what fun it is to ride and sing a sleighing 
          song tonight. Jingle bells, jingle bells, Jingle all the way! O what fun it 
          is to ride in a one-horse open sleigh. Oh! Jingle bells, jingle bells, Jingle 
          all the way! O what fun it is to ride in a one-horse open sleigh.</p>
        <p>Let's see what another p does</p>
        <p><strong>Note:</strong> This example does not send the results to a server side script for active saving of changed content. It would not be difficult to use jQuery to send the saved content to a PHP or perl script (or Rails) using AHAH.</p>
    </div>
    
   
</asp:Content>
